<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:20px;">
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="16">
          <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
            <el-tab-pane label="搜索列表" name="search">
              <el-empty description="帖子为空" :image-size="screenHeight" v-if="postList.length==0"></el-empty>
              <el-row v-for="post in postList" :key="post.id" v-else>
                <el-col>
                  <el-row type="flex" align="middle"
                          style="margin-top:10px;">
                    <el-col :span="2">
                      <!-- 进入用户主页 -->
                      <a :href="'/profile?userId='+post.user.id">
                        <el-avatar :src="post.user.headerUrl" alt="用户头像"
                                   style="width:50px;height:50px;" size="large"></el-avatar>
                      </a>
                    </el-col>
                    <el-col :span="22" style="text-align: left;">
                      <b>
                        <a :href="'/postDetail?postId='+post.post.id">{{ post.post.title }}</a>
                        <el-tag effect="dark" type="success" size="mini" v-if="post.post.type==1">置顶</el-tag>
                        <el-tag effect="dark" type="danger" size="mini" v-if="post.post.status==1">精华</el-tag>
                      </b>
                      <div style="font-size: 10px;margin-top:10px;">
                        <span style="float: left;">{{ post.user.username }} 发布于 {{ post.post.createTime }}</span>
                        <span style="float: right;">
                          赞 <el-badge :value="post.post.good" :max="999" :title="post.post.good"></el-badge>|
                          回帖<el-badge :value="post.post.commentCount" :max="999"
                                      :title="post.post.commentCount"></el-badge></span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-pagination
          v-if="postList.length>0"
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--  底栏  -->
    <Footer/>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "Search",
  components: {Footer, Header},
  data() {
    return {
      screenHeight: screen.availHeight / 2,
      postList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyWords: '',
      post_search_url: '/community/home/search',
      user: null,
      activeName: 'search'
    }
  },
  mounted() {
    this.keyWords = this.$route.query.keyWords;
    if (this.keyWords) {
      this.searchPostList();
    }
  },
  methods: {
    getUser(user) {
      console.log('getUser:', user);
      this.user = user;
    },
    changeTab() {
      this.getPostList();
    },
    searchPostList() {
      this.axios.get(this.post_search_url + '/' + this.keyWords,
          {
            params: {pageSize: this.pageSize, pageNum: this.pageNum}
          }).then((response) => {
        console.log(response);
        this.postList = response.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchPostList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchPostList();
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

>>> *.el-tag {
  margin-left: 5px;
}
</style>
